import { defineComponent } from "vue";
import PageTitle from "@/components/PageTitle";
import { useRequest } from "./request";
import CardView from "@/components/CardView";
import { ITextGroupPropsData } from "../../components/TextGroups/types";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import RoundInfo from "@/components/RoundInfo";
import GreyBlock from "@/components/GreyBlock";
import RowView from "@/components/RowView";
import TextView from "@/components/TextView";
import DividerView from "@/components/DividerView";
import RoundEdgeButtonGroup from "@/components/RoundEdgeButtonGroup";
import BackGroundImage from "@/components/BackGroundImage";
export default defineComponent({
  setup(props, {}) {
    const { workList, btnAction } = useRequest();
    const render1 = () => {
      const data: ITextGroupPropsData[] = [
        {
          name: "类型",
          value: `${workList.value.workName}`,
        },
        {
          name: "用工时间",
          value: `${workList.value.workDay}天`,
          merge: true,
          right: () => {
            return (
              <div
                class="text-[15px]"
                style={{ color: "#FE8923" }}
              >{`${workList.value.workPrice}元 /人/天`}</div>
            );
          },
        },
      ];
      return (
        <BackGroundImage>
          <CardView
            title={workList.value.title}
            data={data}
            itemWidth={"100%"}
          />
        </BackGroundImage>
      );
    };
    const renderItem = (e: any) => {
      console.log("e", e);
      const url = e.logoUrl;
      const data = [
        {
          name: "用工时间",
          value: e.applyDay + "天",
        },
      ];
      const buttons: IButtonGroupViewData[] = [
        {
          display: e.stats == "0",
          text: "拒绝",
          type: "primary",
          plain: true,
          onClick: () => {
            btnAction({
              stats: "2",
              userId: e.userId,
            });
          },
        },
        {
          display: e.stats == "0",
          text: "同意",
          type: "primary",
          onClick: () => {
            btnAction({
              stats: "1",
              userId: e.userId,
            });
          },
        },
        {
          display: e.stats == "2",
          text: "已拒绝",
          style: {
            background: "#c7c7c7",
          },
        },
        {
          display: e.stats == "1",
          text: "已同意",
          type: "primary",
        },
      ].filter((e) => e.display) as IButtonGroupViewData[];
      return (
        <div class={"pb-10 mb-10"}>
          <RoundInfo src={url} title={e.userName} data={data} />
          <GreyBlock class="mt-[12px]">
            <RowView class="justify-between flex-1">
              <RowView>
                <TextView>{e.area}</TextView>
                <TextView>{e.town}</TextView>
              </RowView>
              <RoundEdgeButtonGroup data={buttons} />
            </RowView>
          </GreyBlock>
          <DividerView class="mt-[10px] " />
        </div>
      );
    };
    const render2 = () => {
      return (
        <CardView title="申请列表" radius={0}>
          {workList.value.userApplyVOList.map((e: any) => {
            return renderItem(e);
          })}
          {/* <ListView
            renderItem={renderItem}
            class={"list-view-border-bottom-color"}
          /> */}
        </CardView>
      );
    };
    return () => (
      <PageTitle title="申请列表" childClass={"m-child-top-10 "}>
        {render1()}
        {render2()}
      </PageTitle>
    );
  },
});
